<template>
  <div class="app-container calendar-list-container user-container">
    <div class="filter-container">
      <el-form>
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="16">
            <el-form-item label="类别">
              <template>
                <el-select v-model="queryCondition.type"
                           clearable
                           placeholder="请选择"
                           @change="onChange">
                  <el-option
                    v-for="item in typeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="文件名称">
              <el-input v-model="queryCondition.name"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="0" class="cutOffLine">
          <div class="buttonGroup">
            <el-button size="small" type="primary" @click="queryOssList">
              <icon name="search"></icon>
              查询
            </el-button>
          </div>
        </el-row>
        <el-row :gutter="0" class="cutOffLine">
          <el-upload class="filter-item"
                     action=""
                     :http-request='uploadOss'>
            <el-button size="small" type="primary">
              <icon name="upload"></icon>
              本地文件
            </el-button>
          </el-upload>
          <el-button @click="remoteDialog.show=true" size="small" type="primary" class="filter-item">
            <icon name="upload"></icon>
            网络图片
          </el-button>
        </el-row>
      </el-form>
    </div>
    <el-table
      v-loading="loading"
      :data="cosList"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      style="width: 100%"
      border
      highlight-current-row
      @current-change="handleCurrentChange"
      ref="multipleTable">
      <el-table-column
        align="center"
        label='类别'
        width="50px">
        <template slot-scope="scope">
          <div>{{scope.row.type | displayLabelValue(typeList)}}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        label='文件名'
        prop="name"
        width="300px">
      </el-table-column>
      <el-table-column
        align="left"
        label='文件大小'
        width="100px">
        <template slot-scope="scope">
          <span>{{getFileSize(scope.row.size)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label='创建时间'
        prop="createAt"
        width="200px">
      </el-table-column>
      <el-table-column
        align="center"
        prop="updateAt"
        label='修改时间'
        width="200px">
      </el-table-column>
      <el-table-column
        align="center"
        label='详情'
        width="100px">
        <template slot-scope="scope">
          <el-link :href="scope.row.uri" target="_blank">点击查看</el-link>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label='下载地址'
        width="100px">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.uri" placement="right">
            <el-button type="text" v-clipboard:copy="scope.row.uri" v-clipboard:success="onCopy">复制</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="100px">
        <template slot-scope="scope">
          <div class="operate-groups" v-if="scope.row.editAble">
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              @click="deleteOss(scope.row)">删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="row-padding" justify="space-between" type="flex">
      <el-pagination :current-page="page.current" :page-size="page.size" :page-sizes="[10, 20, 30, 40, 50]"
                     :total="page.total" @current-change="handleCurrentPageChange" @size-change="handleSizeChange"
                     background layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </el-row>

    <el-dialog :title="remoteDialog.title"
               :visible.sync="remoteDialog.show"
               width="60%">
      <el-form ref="form" label-width="80px">
        <el-row type="flex" justify="space-around">
          <el-col>
            <el-form-item label="网络地址">
              <el-input v-model="remoteDialog.url" style="max-width: 600px"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="cutOffLine" justify="space-around">
          <el-col :span="16">
            <el-form-item label="文件名">
              <el-input v-model="remoteDialog.fileName" style="max-width: 600px"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button @click="uploadRemoteImg" size="small" type="primary"
                         v-if="remoteDialog.url.length !== 0">上传
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-image :src="remoteDialog.url" v-if="remoteDialog.url.length !== 0"/>
    </el-dialog>
  </div>
</template>

<script>
export default {

  data () {
    return {
      apiName: {
        queryOssList: this.apiType.sys.queryOss,
        uploadOss: this.apiType.common.uploadOss,
        deleteOss: this.apiType.sys.deleteOss
      },
      typeList: [],
      queryCondition: {
        name: '',
        type: ''
      },
      cosList: [],
      // 分页信息
      page: {
        total: 0,
        current: 1,
        size: 10
      },
      currentRow: {},
      formLabelWidth: '100px',
      loading: false,

      remoteDialog: {
        title: '网络图片',
        show: false,
        url: '',
        fileName: ''
      }
    }
  },
  computed: {
    remoteUrl () {
      return this.remoteDialog.url
    }
  },
  watch: {
    remoteUrl () {
      // const index = this.remoteDialog.url.lastIndexOf('/')
      // this.remoteDialog.fileName = this.remoteDialog.url.substring(index + 1)
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.resultData = undefined
      this.page = {
        total: 0,
        current: 1,
        size: 20
      }
      this.getDictList('OSS_TYPE_DICT', (dict) => {
        if (this.isEmpty(dict)) {
          this.typeList = this.defaultTypeList
        } else {
          this.typeList = dict || []
        }
      })
      this.loading = false
      this.queryOssList()
    },
    handleCurrentPageChange (val) {
      this.page.current = val
      this.queryOssList()
    },
    handleSizeChange (val) {
      this.page.size = val
      this.queryOssList()
    },
    getFolderDisplay (value) {
      for (const type in this.typeList) {
        if (this.typeList[type].value === value) {
          return this.typeList[type].label
        }
      }
    },
    queryOssList () {
      const _this = this
      const body = {
        currentPage: _this.page.current,
        pageSize: _this.page.size,
        queryCondition: this.queryCondition
      }
      _this.fetch(this.apiName.queryOssList, null, body, function (responseData) {
        _this.cosList = responseData.data.info
        _this.page.total = parseInt(responseData.data.totalSize)
      }, null, false)
    },
    uploadOss (file, type) {
      if (this.queryCondition.type === '' && type == null) {
        this.$alert('请选择上传文件类别')
        return
      }
      if (type == null) {
        type = this.queryCondition.type
      }
      let fileObject
      if (file instanceof File) {
        fileObject = file
      } else {
        fileObject = file.file
      }
      let formData = new FormData()
      formData.append('file', fileObject)
      const _this = this
      const param = {
        fileName: fileObject.name,
        type: type
      }
      _this.upload(_this.apiName.uploadOss, param, formData, function () {
        if (!(file instanceof File)) {
          file.onSuccess()
        }
        _this.queryOssList()
      }, null)
    },
    deleteOss (row) {
      const _this = this
      const param = {
        id: row.id
      }
      this.fetch(this.apiName.deleteOss, param, null, function () {
        _this.init()
      }, null)
    },
    handleCurrentChange (currentRow, oldCurrentRow) {
      if (oldCurrentRow !== null && oldCurrentRow !== currentRow) {
        this.$set(oldCurrentRow, 'editAble', false)
        // this.handleCancel(null, oldCurrentRow)
      }
      if (currentRow !== null) {
        this.$set(currentRow, 'editAble', true)
      }
    },
    onChange () {
      this.queryOssList()
    },
    onCopy () {
      this.$message.success('已复制')
    },
    uploadRemoteImg () {
      const _this = this
      this.downloadFile(this.remoteDialog).then(file => {
        _this.remoteDialog = {
          title: '网络图片',
          show: false,
          url: '',
          fileName: ''
        }
        _this.uploadOss(file, 'image')
      })
    }
  }
}
</script>

<style>

</style>
